<template>
  <div class="warning-detail-left-bottom">
    <div class="chart-title">
      <span class="title-icon"></span>
      <div class="title-text">警情趋势</div>
    </div>
    <div class="select-box">
      <!-- <div class="select">
        <nanning-screen-select :options="options" @on-change-value="onChangeSelect" placeholder="全部辖区"></nanning-screen-select>
      </div> -->
      <div class="select">
        <nanning-screen-select :options="typeOptions" @on-change-value="onChangeTypeSelect" placeholder="全部类型"></nanning-screen-select>
      </div>
      <div class="select-date">
        <nanning-screen-select :default-value="'4'" :options="dateOptions" @on-change-value="onChangeTimeSelect" placeholder="请选择"></nanning-screen-select>
      </div>
    </div>
    <div class="chart">
      <screen-chart @initCb="initChart"></screen-chart>
    </div>
  </div>
</template>

<script lang="ts">
import { barOptions } from './option'
import { Component, Vue } from 'vue-property-decorator'
import nanningScreenCascader from 'components/nanning-screen-cascader/index.vue'
import nanningScreenSelect from 'components/nanning-screen-select/index.vue'
import { getTypeList, getWarningTrend } from '@/api/situationAwareness/warningDetail/warningDetail'
@Component({
  name: 'warning-detail-left-bottom',
  components: {
    nanningScreenCascader,
    nanningScreenSelect
  }
})

export default class WarningDetailLeftBottom extends Vue {
  private xData:any = []

  private yData:any = []

  private avaChart: any = null

  private initChart(chart: any): void {
    this.avaChart = chart
    chart.clear()
    setTimeout(() => {
      this.avaChart.setOption(barOptions({ xData: this.xData, yData: this.yData }))
    }, 200)
  }

  private time = '4'
  private dateOptions: Array<any> = [
    { value: '1', label: '近三天' },
    { value: '2', label: '近七天' },
    { value: '3', label: '近一月' },
    { value: '4', label: '近半年' }
  ]

  private options: Array<any> = [
    { value: '0', label: '兴宁区' },
    { value: '1', label: '青秀区' },
    { value: '2', label: '江南区' },
    { value: '3', label: '西乡塘区' },
    { value: '4', label: '良庆区' },
    { value: '5', label: '邑宁区' },
    { value: '6', label: '武鸣区' },
    { value: '7', label: '隆安县' },
    { value: '8', label: '马山区' },
    { value: '9', label: '上林区' },
    { value: '10', label: '宾阳县' },
    { value: '11', label: '横县' }
  ]

  private warningType = ''
  private typeOptions: Array<any> = [
    // { value: '0', label: '测警' },
    // { value: '1', label: '刑事案件' },
    // { value: '2', label: '治安警情' }
  ]

  private value = ''

  private onChangeTimeSelect (e: any) {
    console.log('onChangeTimeSelect', e)
    this.time = e
    this.getWarningTrend()
  }

  private onChangeTypeSelect (e: any) {
    console.log('onChangeTypeSelect', e)
    this.warningType = e
    this.getWarningTrend()
  }

  private onChangeCascader (e: any) {
    console.log('onChangeCascader', e)
  }

  async mounted () {
    await this.getTypeList()
    await this.getWarningTrend()
  }
  async getWarningTrend () {
    this.xData = []
    this.yData = []
    const params = {
      dzcode: '',
      warningType: this.warningType, // this.warningType
      time: this.time
    }
    try {
      const res: any = await getWarningTrend(params)
      console.log(res)
      res.data.forEach((item: any) => {
        this.xData.push(item.jqlbmc)
        this.yData.push(item.total)
      })
      this.initChart(this.avaChart)
    } catch (err) {
      console.error(err)
    }
  }

  async getTypeList () {
    this.typeOptions = [
      {
        label: '全部类型',
        value: ''
      }
    ]
    try {
      const res: any = await getTypeList()
      res.data.forEach((item: any) => {
        const ob = {
          label: item.dictName,
          value: item.dictValue
        }
        this.typeOptions.push(ob)
      })
      this.warningType = ''
    } catch (err) {
      console.error(err)
    }
  }
}
</script>

<style lang="scss" scoped>
.warning-detail-left-bottom {
  width: 100%;
  height: calc(40% - 60px);
  position: relative;
  .chart-title {
    margin-left: 5%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 18px;
    font-family: 'PingFang Regular';
    font-weight: 500;
    color: #FFFFFF;
    .title-icon {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: #23fffc;
      border-radius: 50%;
      margin-right: 4px;
    }
  }
  .select-box {
    display: flex;
    padding-left: 5%;
    margin-top: 20px;
    .select {
      width: 110px;
      margin-right: 10px;
    }
    .select-date {
      width: 90px;
      margin-right: 10px;
    }
  }
  .chart {
    width: 100%;
    height: 70%;
  }
}
</style>
